// BOM表单组件 - 用于新增/编辑/查看BOM信息





<script setup lang="ts">
// 导入所需的Vue组件和工具函数
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Money, Box, Van, SetUp, More } from '@element-plus/icons-vue'
const { dialog, onShow, onClose } = useDialog()
// 导入相关类型定义和API
import { specificationDetailQuery } from '@/api/specificationDetail/type.ts'
import { getSpecificationDetailApi } from '@/api/specificationDetail/index.ts'
import { getSpecificationSimpleListApi } from '@/api/material'
import { Quotation, QuotationListParam } from '@/api/quotation/type.ts'
import {
  getListApi,
  getDetailByIdApi,
  addApi,
  editApi,
} from '@/api/quotation/index.ts'

// 物料选择对话框
import MaterialDialog from '@/views/baseInfo/material/materialDialog/index.vue'
import ArchiveSelector from '@/components/common/ArchiveSelector.vue'

// 物料选择弹框组件实例
const materialDialogRef = ref()

// 定义组件属性
const props = defineProps<{
  Id?: number //  ID，编辑时传入
  mode: string // 组件模式：add/edit/view
}>()



// 定义组件事件
const emit = defineEmits(['save-success', 'cancel'])

// 表单ref，用于表单验证
const formRef = ref<FormInstance>()

// 初始化表单数据
const formData = reactive<Quotation>({
  id: undefined, // 报价单ID
  parentId: undefined, // 父报价单ID（如果有的话）
  name: undefined, // 名称
  specification: undefined, // 规格
  material: undefined, // 材质
  width: undefined, // 宽度
  height: undefined, // 高度
  quantity: undefined, // 数量
  unit: undefined, // 单位，如“个”、“米”、“箱”等
  color: undefined, // 颜色
  colorPrice: 0,
  remark: undefined, // 备注
  unitPrice: undefined, // 含税单价
  unitWeight: undefined, // 单重
  kgPrice: undefined, // 公斤价
  totalPrice: undefined, // 总价
  totalWeight: undefined, // 总重
  projectId: undefined, // 客户
  projectName: undefined, // 客户
  packingPrice: undefined,  // 包装费
  transportationPrice:  undefined,  // 运输费
  implementationPrice:  undefined,  // 实施费
  otherPrice:  undefined, // 其他费用
  materialModel: undefined,
  children: [], // 空数组初始化  计件产品配置
})

// 根据母件信息查询子件配置
const specificationDetail = reactive<specificationDetailQuery>({
  materialName: undefined, // 物料
  specification: undefined, // 规格
  length: undefined, // 高度
  breadth: undefined, // 宽度
  number: undefined, // 数量
  materialType: undefined, // 材质
  colorPrice: 0,
})

// 选择基础物料相关
const baseMaterialDialogRef = ref()
const openBaseMaterialSelect = () => {
  baseMaterialDialogRef.value.onShow()
}

// 处理基础物料选择，选择哪个物料就将哪个物料的信息带入表单
const handleBaseMaterialSelect = (material: any) => {
  // 将选中物料的信息带入表单
  formData.name = material.materialName
  formData.unit = material.unitName
  formData.specification = material.specification
  formData.material = material.materialType
  formData.width = material.breadth
  formData.height = material.length
  formData.materialModel = material.materialModel

  formData.quantity = 1
  // 根据母件信息查询子件配置
  getSpecificationDetail()
  // 根据物料查询该物料的所有规格列表
  getSpecificationSimpleList(formData.name)
}

// 存储已选物料的其他规格配置
const specificationSimpleList = ref<string[]>([])

// 根据物料查询该物料的所有规格列表
const getSpecificationSimpleList = async (materialName: any) => {
  const res = await getSpecificationSimpleListApi(materialName)
  specificationSimpleList.value = res.data
}

//表单校验规则
const rules = {
  name: [{required: true, message: '请输入名称', trigger: 'change'}],
  color: [{required: true, message: '请选择颜色', trigger: 'change'}],
  projectName: [{required: true, message: '请选择项目'}],
}



// 提交表单
const submitForm = async () => {
  if (props.mode === 'view') return // 查看模式不允许提交
  try {
    // 表单验证
    await formRef.value?.validate()
    console.log(props.mode + '提交数据：' + formData)
    if (props.mode === 'add') {
      // 调用保存API
      await addApi(formData)
    }
    if (props.mode === 'edit') {
      // 调用保存API
      await editApi(formData)
    }
    ElMessage.success('保存成功')
    emit('save-success')
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('保存失败')
  }
}

function printPage() {
  window.print();
}
// 取消操作
const cancel = () => {
  emit('cancel')
}

// 监听bomId变化,当编辑时加载BOM详情
watch(
  () => props.Id,
  async (newVal) => {
    console.log(props.Id)
    if (newVal) {
      try {
        const res = await getDetailByIdApi(newVal)
        console.log(res.data)
        if (res?.data) {
          Object.assign(formData, res.data) // 加载详情数据到表单
          selectedProject.value = {
            id: res.data.projectId,
            name: res.data.projectName || '',
          } as ProjectDocument
        }
        // 根据物料查询该物料的所有规格列表
        getSpecificationSimpleList(formData.name)
        getSpecificationDetail()
      } catch (error) {
        console.error('获取BOM详情失败:', error)
      }
    }
  },
  { immediate: true }
)

// 当前激活的tab页
const activeTab = ref('materials')

// 根据母件信息查询子件配置
const getSpecificationDetail = async () => {
  // 查询条件
  specificationDetail.materialName = formData.name
  specificationDetail.specification = formData.materialModel
  specificationDetail.length = formData.height
  specificationDetail.breadth = formData.width
  specificationDetail.number = formData.quantity
  specificationDetail.colorPrice = formData.colorPrice
  specificationDetail.materialType = formData.material

  try {
    const res = await getSpecificationDetailApi(specificationDetail)
    console.log(res)
    if (res?.data) {
      formData.unitPrice = res.data.price
      formData.unitWeight = res.data.weight
      formData.kgPrice = res.data.kilogramPrice
      formData.totalPrice = res.data.allPrice
      formData.totalWeight = res.data.allWeight
      formData.children = res.data.children.map((item: any, index: number) => ({
        id: formData.children[index]?.id, // 获取原本 formData.children 中的 id
        parentId: formData.children[index]?.parentId, // 获取原本 formData.children 中的 parentId
        name: item.materialName,
        specification: item.materialSpecifications,
        material: item.materialType,
        height: item.height,
        width: item.width,
        quantity: item.number,
        unitPrice: item.price,
        unitWeight: item.weight,
        kgPrice: item.kilogramPrice,
        totalPrice: item.allPrice,
        totalWeight: item.allWeight,
        map: item.map,
      }))
    } else {
      ElMessage.error('暂未查询到该配置')
    }
  } catch (error) {
    console.log(error)
    ElMessage.error('暂未查询到该配置')
  } finally {
  }
}

// 定义详情数据的接口
interface DetailData {
  [key: string]: number | string
}

// 当前显示的详情数据
const currentDetailData = ref<DetailData | null>(null)

// 查询显示明细
const viewDetail = (index: number) => {
  const detailData = formData.children[index].map as DetailData
  console.log('详情数据:', detailData)
  dialog.title = '费用详情'
  dialog.width = 700
  dialog.height = 350
  dialog.visible = true
  currentDetailData.value = detailData
}

import { getListApi as getColorListApi } from '@/api/color'
import { getListApi as getCustomerListApi } from '@/api/companyCustomer'
import type { Color } from '@/api/color/type'
import type { CompanyCustomer } from '@/api/companyCustomer/type'
import SysDialog from '@/components/dialog/SysDialog.vue'
import useDialog from '@/hooks/useDialog.ts'
import {getProjectDocumentListApi} from "@/api/project";
import {ProjectDocument, ProjectDocumentListParam} from "@/api/project/type.ts";

// 选择器显示状态
const colorSelectorVisible = ref(false)
const projectSelectorVisible = ref(false)

// 选中的数据
const selectedColor = ref<Color>()
const selectedProject = ref<ProjectDocument | null>(null)

// 颜色档案配置
const colorSearchFields: Array<{
  label: string
  prop: string
  type: 'input' | 'select'
  options?: Array<{ label: string; value: any }>
}> = [
  { label: '颜色编码', prop: 'colorCode', type: 'input' },
  { label: '颜色名称', prop: 'colorName', type: 'input' },
  {
    label: '状态',
    prop: 'isActive',
    type: 'select',
    options: [
      { label: '启用', value: '0' },
      { label: '禁用', value: '1' },
    ],
  },
]

const colorTableColumns = [
  { prop: 'colorCode', label: '颜色编码', width: 120 },
  { prop: 'colorName', label: '颜色名称', width: 120 },
  { prop: 'description', label: '描述' },
]

// 客户档案配置
// 项目状态映射
const statusOptions = [
  { value: 0, label: '进行中' },
  { value: 1, label: '已完成' },
  { value: 2, label: '已暂停' },
  { value: 3, label: '已取消' },
]
// 项目选择器搜索字段配置
const projectSearchFields = [
  { label: '项目名称', prop: 'name', type: 'input' as const },
  { label: '项目编号', prop: 'code', type: 'input' as const },
  { label: '客户名称', prop: 'customer', type: 'input' as const },
  {
    label: '项目状态',
    prop: 'status',
    type: 'select' as const,
    options: statusOptions,
  },
]

// 项目选择器表格列配置
const projectTableColumns = [
  { prop: 'name', label: '项目名称', width: 250 },
  { prop: 'code', label: '项目编号', width: 250 },
  { prop: 'customer', label: '客户名称', width: 250 },
  { prop: 'manager', label: '项目经理', width: 200 },
]


// 显示选择器
const showColorSelector = () => {
  colorSelectorVisible.value = true
}

const openProjectSelector = () => {
  projectSelectorVisible.value = true
}

// 处理选择结果
const handleColorSelect = (color: Color) => {
  selectedColor.value = color
  formData.color = color.colorName
  formData.colorPrice = 0
  getSpecificationDetail()
}

// 处理项目选择确认
const handleProjectSelect = (project: ProjectDocument) => {
  selectedProject.value = project
  console.log('选择的项目:', project)
  formData.projectId = project.id
}



// API 封装
const getColorList = (params: any) => {
  return getColorListApi(params)
}

// 获取项目列表数据的API方法
const getProjectList = async (params: any) => {
  try {
    // 构建查询参数
    const queryParams: ProjectDocumentListParam = {
      name: params.name,
      code: params.code,
      customer: params.customer,
      status: params.status,
      page: params.page || 1,
      limit: params.limit || 10,
    }

    // 调用项目列表API - 使用真实API
    return await getProjectDocumentListApi(queryParams)
  } catch (error) {
    console.error('获取项目列表失败:', error)
    return { data: { list: [], total: 0 } }
  }
}
</script>

<template>
  <div class="bom-form">
    <div class="form-header">
      <h3>{{ mode === 'add' ? '新增核价单' : mode === 'edit' ? '编辑核价单' : '核价单详情' }}</h3>
    </div>

    <el-form ref="formRef"
             :model="formData"
             label-width="90px"
    :rules="rules">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="名称"
                        prop="name">
            <el-input v-model="formData.name"
                      placeholder="请选择基础物料"
                      readonly>
              <template #append>
                <el-button @click="openBaseMaterialSelect">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="物料型号" prop="materialModel">
            <el-select v-model="formData.materialModel"
                       placeholder="请选择物料型号"
                       @change="getSpecificationDetail">
              <el-option v-for="spec in specificationSimpleList"
                         :key="spec"
                         :label="spec"
                         :value="spec" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="formData.width"
                      @blur="getSpecificationDetail">
              <template #append>mm</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="高度" prop="height">
            <el-input v-model="formData.height"
                      @blur="getSpecificationDetail">
              <template #append>mm</template>
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="材质" prop="material">
            <el-input v-model="formData.material"
                      readonly />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="数量" prop="quantity">
            <el-input-number v-model="formData.quantity"
                             style="width: 260px"
                             :min="1"
                             :precision="0"
                             @change="getSpecificationDetail" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="formData.unit"
                      readonly />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="颜色"
                        prop="color">
            <el-input v-model="formData.color"
                      placeholder="请选择颜色"
                      readonly>
              <template #append>
                <el-button @click="showColorSelector">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="含税单价"
                        prop="unitPrice">
            <el-input v-model="formData.unitPrice"
                      readonly />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="单重"
                        prop="unitWeight">
            <el-input v-model="formData.unitWeight"
                      readonly />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="公斤价"
                        prop="kgPrice">
            <el-input v-model="formData.kgPrice"
                      readonly />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="总重"
                        prop="totalWeight">
            <el-input v-model="formData.totalWeight"
                      readonly />
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="项目"
                        prop="projectId">
            <el-input :model-value="selectedProject ? selectedProject.name : ''"
                      placeholder="请选择项目"
                      readonly>
              <template #append>
                <el-button @click="openProjectSelector">选择</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="颜色价格"
                        v-if="formData.color!='标准色' && formData.color">
            <el-input type="number"
                      v-model="formData.colorPrice"
                      placeholder="请输入颜色价格"
                      @blur="getSpecificationDetail">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6"
                :offset="6">
          <el-form-item label="总价"
                        prop="totalPrice">
            <el-input v-model="formData.totalPrice"
                      readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 分摊费用部分 -->
      <div v-if="mode == 'view'"
           class="share-section">
        <div class="share-title">
          <el-divider content-position="left">
            <el-icon>
              <Money />
            </el-icon>
            <span>分摊费用</span>
          </el-divider>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="包装费">
              <el-input v-model="formData.packingPrice"
                        readonly>
                <template #append>
                  <span class="unit">元</span>
                </template>
                <template #prefix>
                  <el-icon>
                    <Box />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输费">
              <el-input v-model="formData.transportationPrice"
                        readonly>
                <template #append>
                  <span class="unit">元</span>
                </template>
                <template #prefix>
                  <el-icon>
                    <Van />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实施费">
              <el-input v-model="formData.implementationPrice"
                        readonly>
                <template #append>
                  <span class="unit">元</span>
                </template>
                <template #prefix>
                  <el-icon>
                    <SetUp />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他费用">
              <el-input v-model="formData.otherPrice"
                        readonly>
                <template #append>
                  <span class="unit">元</span>
                </template>
                <template #prefix>
                  <el-icon>
                    <More />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 使用tabs替换原来的两个表格 -->
      <el-tabs v-model="activeTab">
        <!-- 物料清单tab -->
        <el-tab-pane label="物料清单"
                     name="materials">
          <el-form-item prop="bomMaterialDtoList">
            <el-table :data="formData.children"
                      border
                      style="width: 100%">
              <el-table-column type="index"
                               label="序号"
                               width="70" />
              <el-table-column prop="name"
                               label="名称"
                               min-width="120" />
              <el-table-column prop="specification"
                               label="规格"
                               min-width="120" />


              <el-table-column prop="material"
                               label="材质"
                               min-width="100" />
              <el-table-column prop="height"
                               label="高度"
                               min-width="100" />
              <!--<el-table-column prop="unit" label="单位" width="80" />-->
              <el-table-column prop="unitPrice"
                               label="含税单价"
                               min-width="100" />
              <el-table-column prop="quantity"
                               label="数量"
                               width="120"></el-table-column>
              <el-table-column prop="unitWeight"
                               label="单重"
                               min-width="100" />
              <el-table-column label="操作"
                               width="80">
                <template #default="scope">
                  <el-button type="primary"
                             link
                             @click="viewDetail(scope.$index)"
                             icon="view" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item label="备注">
        <el-input v-model="formData.remark"
                  type="textarea"
                  :rows="3"
                  placeholder="输入描述" />
      </el-form-item>
    </el-form>

    <div class="form-actions">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary"
                 @click="submitForm"
                 v-if="mode !== 'view'">保存
      </el-button>
      <el-button type="success" @click="printPage">打印</el-button>
    </div>

    <!-- 添加基础物料选择弹框 -->
    <material-dialog ref="baseMaterialDialogRef"
                     :multiple="false"
                     @handleMaterialSelect="handleBaseMaterialSelect" />

    <!-- 颜色选择器（单选） -->
    <ArchiveSelector v-model="colorSelectorVisible"
                     title="选择颜色"
                     :search-fields="colorSearchFields"
                     :table-columns="colorTableColumns"
                     :fetch-data-api="getColorList"
                     :multiple="false"
                     @confirm="handleColorSelect" />

<!--    &lt;!&ndash; 客户选择器（多选） &ndash;&gt;
    <ArchiveSelector v-model="customerSelectorVisible"
                     title="选择客户"
                     :search-fields="customerSearchFields"
                     :table-columns="customerTableColumns"
                     :fetch-data-api="getCustomerList"
                     :multiple="false"
                     @confirm="handleCustomerSelect" />-->

    <!-- 项目选择器组件 -->
    <ArchiveSelector v-model="projectSelectorVisible"
                     title="选择项目"
                     :search-fields="projectSearchFields"
                     :table-columns="projectTableColumns"
                     :fetch-data-api="getProjectList"
                     :multiple="false"
                     @confirm="handleProjectSelect" />




    <!-- 详情 -->
    <sys-dialog :title="dialog.title"
                :width="dialog.width"
                :visible="dialog.visible"
                :height="dialog.height"
                @onClose="onClose"
                @onConfirm="onClose">
      <template #content>
        <div class="detail-container"
             v-if="currentDetailData">
          <el-descriptions :column="2"
                           border>
            <template v-for="(value, key) in currentDetailData"
                      :key="key">
              <el-descriptions-item :label="(key as string).replace(/@/g, '')">
                {{ value }}
                <!-- 价格相关单位 -->
                <template v-if="(key as string).includes('总价') || (key as string).includes('费用')|| (key as string).includes('单价')">
                  <span class="unit">元</span>
                </template>
                
                <!-- 重量相关单位 -->
                <template v-else-if="(key as string).includes('总重') || (key as string).includes('单重')">
                  <span class="unit">kg</span>
                </template>
                
                <!-- 面积相关单位 -->
                <template v-else-if="(key as string).includes('单面积') || (key as string).includes('总面积')">
                  <span class="unit">m²</span>
                </template>

                <!-- 加工工艺单位 -->
                <template v-else-if="(key as string).includes('自动冲压') && !(key as string).includes('冲压')">
                  <span class="unit">元/kg</span>
                </template>
                <template v-else-if="(key as string).includes('冲压') || 
                                    (key as string).includes('钻孔') || 
                                    (key as string).includes('折弯') || 
                                    (key as string).includes('焊接') || 
                                    (key as string).includes('板材下料')">
                  <span class="unit">元/件</span>
                </template>
                <template v-else-if="(key as string).includes('辊轧成型') || 
                               (key as string).includes('切管下料') || 
                               (key as string).includes('抛丸')">
                  <span class="unit">元/kg</span>
                </template>
                <template v-else-if="(key as string).includes('激光下料')|| 
                               (key as string).includes('喷涂')">
                  <span class="unit">元/m</span>
                </template>
                <template v-else-if="(key as string).includes('剪板下料')">
                  <span class="unit">元/次</span>
                </template>
                <template v-else-if="(key as string).includes('长度') || (key as string).includes('厚度')">
                  <span class="unit">mm</span>
                </template>
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </div>
      </template>
    </sys-dialog>
  </div>
</template>

<style scoped lang="scss">

@media print {
  .form-actions,
  .el-button,
  .el-tabs__header,
  .el-form-item__label {
    display: none !important;
  }
  /* 隐藏菜单栏 */
  .sidebar {
    display: none !important;
  }

  /* 隐藏页签 */
  .tabs {
    display: none !important;
  }

  /* 隐藏其他不需要的元素，例如标签栏 */
  .el-tabs__header {
    display: none !important;
  }

  .el-table {
    width: 100% !important;
    border-collapse: collapse;
  }

  .el-table th,
  .el-table td {
    border: 1px solid #000;
    padding: 8px;
  }

  .el-icon,
  .unit {
    display: none;
  }

  .bom-form {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}



.bom-form {
  padding: 20px;
  padding-top: 0;
  background: #fff;
  height: 100%;
  overflow-y: auto;

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;

    h3 {
      margin: 0;
      font-size: 18px;
    }
  }

  .form-actions {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  // 修改禁用状态下的样式
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background-color: var(
      --el-input-disabled-bg-color,
      var(--el-disabled-bg-color)
    );
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    color: var(--el-text-color-primary);
    -webkit-text-fill-color: var(--el-text-color-primary);
  }

  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    color: var(--el-text-color-primary);
    -webkit-text-fill-color: var(--el-text-color-primary);
  }

  :deep(.el-radio.is-disabled.is-checked) {
    .el-radio__label {
      color: var(--el-text-color-primary);
    }
  }

  :deep(.el-radio.is-disabled) {
    .el-radio__label {
      color: var(--el-text-color-primary);
    }
  }

  // 添加价格输入样式
  :deep(.el-input-group__append) {
    padding: 0 10px;
    background-color: var(--el-color-primary-light-8);
    color: var(--el-color-primary);
    font-weight: bold;
  }

  // 添加tabs相关样式
  :deep(.el-tabs__header) {
    margin-bottom: 15px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  :deep(.el-tabs__item) {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }

  :deep(.el-tabs__item.is-active) {
    font-weight: bold;
  }
}

.detail-container {
  padding: 20px;

  :deep(.el-descriptions) {
    margin-bottom: 20px;

    .el-descriptions__header {
      margin-bottom: 20px;
    }

    .el-descriptions__label {
      font-weight: bold;
      color: var(--el-text-color-primary);
      background-color: var(--el-fill-color-light);
      min-width: 150px;
    }

    .el-descriptions__content {
      font-size: 14px;
      color: var(--el-text-color-regular);

      .unit {
        margin-left: 4px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.share-section {
  margin-top: 20px;
  padding: 0 10px;

  .share-title {
    margin-bottom: 20px;

    .el-divider {
      .el-icon {
        margin-right: 8px;
        color: var(--el-color-primary);
      }

      span {
        font-size: 16px;
        font-weight: bold;
        color: var(--el-text-color-primary);
      }
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 22px;

    .el-form-item__label {
      font-weight: bold;
      color: var(--el-text-color-regular);
    }

    .el-input {
      .el-input__wrapper {
        background-color: var(--el-fill-color-blank);
      }

      .el-input__prefix {
        color: var(--el-color-primary);
        margin-right: 8px;
      }

      .el-input__inner {
        color: var(--el-color-danger);
        font-weight: bold;
        text-align: right;
      }

      .el-input-group__append {
        padding: 0 12px;
        background-color: var(--el-color-primary-light-8);

        .unit {
          color: var(--el-color-primary);
          font-size: 13px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
